/**
 * 拖拽插件
 */
export default class DragTool {
    private dragDiv!: HTMLDivElement; // 要拖拽的div元素
    private offsetLeft: number = 0;
    private offsetTop: number = 0;
    private isDrag: boolean = false;
    private dragWidth: number = 50; // 可拖动高度
    private isSeeBody: boolean = false;
    private callBack: any = null;
    /**
     *  鼠标左键按下 开始拖动
     * @param moveDiv 要拖动的DIV元素
     * @param event 鼠标事件
     * @param isSeeBody 是否可以超出可视范围
     * @param callBack 回调函数 (newLeft, newTop)=>void
     */
    public startDrag(moveDiv: HTMLDivElement, event: MouseEvent, isSeeBody: boolean = false, callBack: any = () => false) {
        // console.log("鼠标左键按下,开始拖拽");
        const domRect: DOMRect = moveDiv.getBoundingClientRect();
        const clikDivY = event.clientY - domRect.top;
        if (clikDivY > 0 && clikDivY < this.dragWidth) {
            this.dragDiv = moveDiv;
            this.isSeeBody = isSeeBody;
            this.callBack = callBack;
            // 获取左部和顶部的偏移量
            this.offsetLeft = event.clientX - this.dragDiv.offsetLeft;
            this.offsetTop = event.clientY - this.dragDiv.offsetTop;
            // console.log(`offsetLeft=${this.offsetLeft},offsetTop=${this.offsetTop}`);
            // 开关打开
            this.isDrag = true;
            // 设置样式
            this.dragDiv.style.cursor = "move";
            this.dragDiv.style.transition = "none";
            // 开始跟随移动
            this.divDrag();
        } else {
            // 开关关闭
            this.isDrag = false;
            // 停止跟随移动
            window.onmousemove = null;
            window.onmouseup = null;
        }
    }
    /**
     * 设置 可拖动范围高度 Y抽从 0 开始，鼠标再当前范围内才能拖动
     * @param num 可拖动范围高度 默认50
     */
    public setDragWidth(num: number = 50) {
        this.dragWidth = num;
    }
    // 鼠标移动 DIV 跟随移动
    private divDrag() {
        // console.log("鼠标移动 DIV 跟随移动");
        // 鼠标左键放开 结束拖动
        window.onmouseup = (event: MouseEvent) => {
            // console.log("鼠标左键放开 结束拖动");
            if (this.isDrag) {
                // 开关关闭
                this.isDrag = false;
                // 设置样式
                this.dragDiv.style.cursor = "default";
                this.dragDiv.style.transition = "all 0.3s ease-in";
                // 停止跟随移动
                window.onmousemove = null;
                window.onmouseup = null;
            }
        };
        // 鼠标移动
        window.onmousemove = (e: MouseEvent) => {
            if (!this.isDrag) {
                return;
            }
            // 获取x和y
            const newX = e.clientX;
            const newY = e.clientY;
            // 计算移动后的左偏移量和顶部的偏移量
            let newLeft = newX - this.offsetLeft;
            let newTop = newY - this.offsetTop;
            // 获取浏览器可视高度和宽度
            const height = window.innerHeight;
            const width = window.innerWidth;
            // 获取 可拖动DIV 高度和宽度
            const divH = this.dragDiv.clientHeight;
            const divW = this.dragDiv.clientWidth;
            // 获取 顶边 最大值
            const maxTop = height - divH;
            // 获取 左边 做大值
            const maxLeft = width - divW;
            if (this.isSeeBody) {
                // 判断是否超出 可视 范围
                newLeft = newLeft < 0 ? 0 : newLeft;
                newTop = newTop < 0 ? 0 : newTop;
                newLeft = newLeft > maxLeft ? maxLeft : newLeft;
                newTop = newTop > maxTop ? maxTop : newTop;
            }

            // console.log(`newLeft=${newLeft},newTop=${newTop}`);
            this.dragDiv.style.left = `${newLeft}px`;
            this.dragDiv.style.top = `${newTop}px`;
            this.callBack(newLeft, newTop);
        };
    }
}
